<script setup lang="ts">

const active = shallowRef<boolean>(false)

function show() {
    active.value = true
    setTimeout(() => {
        active.value = false
    }, 500)
}

defineExpose({ show })
</script>

<template>
    <div class="button">
        <slot></slot>
        <span class="animation" :class="{ active }" v-if="active"></span>
    </div>
</template>

<style lang="scss" scoped>
.button {
    position: relative;

    .animation {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        /* 通过var函数调用自定义属性--c,设置阴影颜色 */
        box-shadow: 0 -20px 0 #e52129,
            0 20px 0 #e52129,
            -20px 0 0 #e52129,
            20px 0 0 #e52129,
            -15px -15px 0 #e52129,
            15px -15px 0 #e52129,
            15px 15px 0 #e52129,
            -15px 15px 0 #e52129;
    }
}

.active {
    animation: blink 0.5s ease-in-out forwards;
}


@keyframes blink {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0;
    }
}
</style>
